<template>
  <div class="cesium-container">
    <div id="cesiumContainer" ref="cesiumContainer" class="container" />
    <div class="component-list">
      <div v-for="item in componentList" :key="item.busType">
        <transition name="fade-transform" mode="out-in">
          <component
            :is="item.component"
            v-show="item.isShow"
            :widget-config="item.config"
          />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";
import widgetsOptions from "@/cesiumWidgets/widgetsOptions";

export default {
  name: "CesiumMap",
  data() {
    return {
      componentList: widgetsOptions,
    };
  },
  mounted() {
    this.initMap();
    //  监听事件 cesiumBusEvent
    this.$bus.on("cesiumBusEvent", this.widgetsChange);
  },
  beforeDestroy() {
    this.viewer = null;
    this.$bus.emit("mapCreated", null);
  },
  methods: {
    // 初始化地图
    initMap() {
      window.viewer = this.viewer = new this.Cesium.Viewer("cesiumContainer", {
        allowTextureFilterAnisotropic: true,
        animation: false, // 是否创建动画小器件，左下角仪表
        baseLayerPicker: false, // 是否显示图层选择器
        fullscreenButton: false, // 是否显示全屏按钮
        geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
        homeButton: false, // 是否显示Home按钮
        infoBox: false, // 是否显示信息框
        sceneModePicker: false, // 是否显示3D/2D选择器
        selectionIndicator: false, // 是否显示选取指示器组件
        timeline: false, // 是否显示时间轴
        navigationHelpButton: false, // 是否显示右上角的帮助按钮
        // scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        // clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
        selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型，仅baseLayerPicker设为true有意义
        imageryProviderViewModels:
          Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型，仅baseLayerPicker设为true有意义
        terrainProviderViewModels:
          Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
        imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        }),

        // eslint-disable-next-line no-undef
        // skyBox: new Cesium.SkyBox({
        //   sources: {
        //     positiveX: "Cesium-1.7.1/Skybox/px.jpg",
        //     negativeX: "Cesium-1.7.1/Skybox/mx.jpg",
        //     positiveY: "Cesium-1.7.1/Skybox/py.jpg",
        //     negativeY: "Cesium-1.7.1/Skybox/my.jpg",
        //     positiveZ: "Cesium-1.7.1/Skybox/pz.jpg",
        //     negativeZ: "Cesium-1.7.1/Skybox/mz.jpg",
        //   },
        // }), // 用于渲染星空的SkyBox对象
        // fullscreenElement: document.body, // 全屏时渲染的HTML元素,
        // useDefaultRenderLoop: true, // 如果需要控制渲染循环，则设为true
        // targetFrameRate: undefined, // 使用默认render loop时的帧率
        showRenderLoopErrors: false, // 如果设为true，将在一个HTML面板中显示错误信息
        automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
        // contextOptions: undefined, // 传递给Scene对象的上下文参数（scene.options）
        // sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式
        // mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
        // dataSources: new Cesium.DataSourceCollection(),
        // requestRenderMode: true,
        contextOptions: {
          webgl: {
            alpha: true,
            depth: true,
            stencil: true,
            antialias: true,
            premultipliedAlpha: true,
            // 通过canvas.toDataURL()实现截图需要将该项设置为true
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: true,
          },
        },
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; //	去除版权信息

      // this.$bus.emit("mapCreated", this.viewer);

      // 创建监听cesium的基本属性信息
      this.cameraChangedEventListener();

      // 初始化飞入指定位置
      DxCommonUtils.cameraFlyTo({});
    },
    // 创建相机位置变动的监听
    cameraChangedEventListener() {
      this.viewer.camera.changed.addEventListener((percentage) => {
        const heading = this.viewer.scene.camera.heading.toFixed(6);
        const position = DxCommonUtils.getCenterPosition();
        this.$store.commit("cesiumBaseInfo/SET_BASE_CESIUM_INFO", {
          lon: position.lon,
          lat: position.lat,
          height: position.height,
          heading: heading,
        });
      });
    },
    // widgets 事件监听 控制widget的显隐
    widgetsChange(type) {
      const obj =
        this.componentList.find((item) => item.busType === type) || null;
      if (obj && obj.longDisplay) {
        obj.isShow = !obj.isShow;
        return;
      }
      this.componentList.forEach((item) => {
        if (item.longDisplay) {
          return;
        }
        if (item.busType === type) {
          item.isShow = !item.isShow;
        } else {
          item.isShow = false;
        }
      });
      // const obj =
      //   this.componentList.find((item) => item.busType === type) || null;
      // obj.isShow = !obj.isShow;
      // if (!obj.longDisplay) {
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.cesium-container {
  width: 100%;
  height: calc(100vh);
  position: relative;
  & > .container {
    width: 100%;
    height: 100%;
  }
  // & > .component-list {
  // }
}
.content {
  position: relative;
}
</style>
